<template>
	<view class="family-history-wrap">
		<view class="survey-item">
			<text>患者姓名</text>
			<view class="flex-item">
				<input type="text" :value="name" placeholder="请输入患者姓名" />
			</view>
		</view>
		<view class="survey-item">
			<text>患者性别</text>
			<view class="flex-item">
				<picker @change="bindGenderChange" :value="gender" :range="genderList">
					<view class="uni-input">{{genderList[gender] || '请选择患者性别'}}<image src="../../static/arrow.png" mode="aspectFill"></image></view>
				</picker>
			</view>
		</view>
		<view class="survey-item">
			<text>患者年龄</text>
			<view class="flex-item">
				<input type="text" :value="age" placeholder="请输入患者年龄" />
			</view>
		</view>
		<view class="survey-item">
			<text>亲属关系</text>
			<view class="flex-item">
				<picker @change="bindRelationChange" :value="relation" :range="relationList">
					<view class="uni-input">{{relationList[relation] || '请选择亲属关系'}}<image src="../../static/arrow.png" mode="aspectFill"></image></view>
				</picker>
			</view>
		</view>
		<view class="survey-item">
			<text>就诊医院</text>
			<view class="flex-item">
				<input type="text" :value="hospital" placeholder="请输入就诊医院" />
			</view>
		</view>
		<view class="survey-item">
			<text>住院号</text>
			<view class="flex-item">
				<input type="text" :value="admission"  placeholder="请输入住院号"/>
			</view>
		</view>
		<view class="survey-item">
			<text>根治性手术部位</text>
			<view class="flex-item">
				<input type="text" :value="spot" placeholder="请输入根治性手术部位" />
			</view>
		</view>
		<view class="survey-item">
			<text>手术时间</text>
			<view class="flex-item">
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="uni-input">{{date || '请选择手术时间'}}<image src="../../static/arrow.png" mode="aspectFill"></image></view>
				</picker>
			</view>
		</view>
		<view class="submit-btn" @click="onSubmit">保存提交</view>
		<view class="submit-btn" @click="backHome">返回首页</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				age: '',
				gender: '',
				relation: '',
				hospital: '',
				admission: '',
				spot: '',
				date: '',
			}
		},
		
		computed: {
			genderList() {
				return ['男', '女']
			},
			
			relationList() {
				return ['父母', '配偶', '子女', '兄弟']
			},
			
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		
		methods: {
			backHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			
			bindGenderChange(e) {
				this.gender = e.target.value
			},
			
			bindRelationChange(e) {
				this.relation = e.target.value
			},
			
			bindDateChange (e) {
				this.date = e.target.value
			},
			
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
	
				if (type === 'start') {
					year = year - 10;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			
			onSubmit() {
				this.$store.dispatch('family/setFamilyHistory', {
					name: this.name,
					age: this.age,
					hospital: this.hospital,
					admission: this.admission,
					spot: this.spot,
					date: this.date,
				}).then(res => {
					this.$store.dispatch('success/setSuccessId', {
						id: res.id,
						next: '/pages/result/result'
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.family-history-wrap {
		margin: 20rpx;
		
		.survey-item {
			background-color: #FFFFFF;
			border-radius: 20rpx;
			padding: 20rpx;
			font-size: 24rpx;
			line-height: 2;
			margin-bottom: 20rpx;
			display: flex;
		
			text {
				width: 200rpx;
			}
			
			.flex-item {
				flex: 1;
				text-align: right;
				
				image {
					width: 20rpx;
					height: 18rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
	
	.submit-btn {
		width: 470rpx;
		height: 80rpx;
		line-height: 80rpx;
		margin: 30rpx auto;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		background-image: linear-gradient(to right, #60d8d2, #478ce4);
		border-radius: 20rpx;
	}
</style>
